<template>
  <div style="padding: 50px 20px 40px 10px">
    <el-card class="box-card">
      <theContent />
      <!-- 选项卡 -->
      <div class="tabsEle">
        <el-row>
          <el-col :span="24">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="全部" name="first" />
              <el-tab-pane label="待审核" name="second" />
              <el-tab-pane label="已审核" name="third" />
              <el-tab-pane label="已拒绝" name="fourth" />
            </el-tabs>
          </el-col>
        </el-row>
        <el-alert type="info" :closable="false" class="icTitle">
          <i class="el-icon-info" style="font-size: 16px"></i>
          数据一共{{ tableData.length }}条
        </el-alert>
        <tab-ele :tableData="tableData" @successEle="successEle" />
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 2, 3, 4]"
            :page-size="10"
            background
            layout="prev, pager, next, sizes, jumper"
            :total="tableData.length"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getQuestionsChoiceApi } from '@/api/menu'
import theContent from '../components/theContent'
import tabEle from '../menu1-2/components/tabEle.vue'
export default {
  components: { theContent, tabEle },
  data() {
    return {
      activeName: 'first',
      currentPage4: 1,
      page: 1, // 页数
      pagesize: 10, // 没页条数
      from: {
        page: 1, // 页数
        pagesize: 99, // 也条数
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '', // 目录
        chkState: '' // 审核状态
      },
      tableData: []
    }
  },
  async created() {
    const { data: res } = await getQuestionsChoiceApi()
    res.items.forEach((item) => {
      // console.log(item.questionType)
      if (item.questionType === '1') {
        item.questionType = '单选'
      } else if (item.questionType === '2') {
        item.questionType = '多选'
      } else if (item.questionType === '3') {
        item.questionType = '简答'
      }
      if (item.difficulty === '1') {
        item.difficulty = '简单'
      } else if (item.difficulty === '2') {
        item.difficulty = '一般'
      } else if (item.difficulty === '3') {
        item.difficulty = '困难'
      }
      if (item.chkState === 1) {
        item.chkState = '通过'
      } else if (item.chkState === 2) {
        item.chkState = '拒绝'
      } else if (item.chkState === 0) {
        item.chkState = '待审核'
      }
      item.pad = false
    })

    this.tableData = res.items
  },
  methods: {
    async handleClick(tab) {
      const obj = {
        page: 1, // 页数
        pagesize: 99 // 页条数
      }
      if (tab.index === '0') {
        console.log(0)
      } else if (tab.index === '1') {
        obj.chkState = 0
      } else if (tab.index === '2') {
        obj.chkState = 1
      } else if (tab.index === '3') {
        obj.chkState = 2
      }
      const { data: res } = await getQuestionsChoiceApi(obj)
      res.items.forEach((item) => {
        // console.log(item.questionType)
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else if (item.questionType === '3') {
          item.questionType = '简答'
        }
        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '一般'
        } else if (item.difficulty === '3') {
          item.difficulty = '困难'
        }
        if (item.chkState === 1) {
          item.chkState = '通过'
        } else if (item.chkState === 2) {
          item.chkState = '拒绝'
        } else if (item.chkState === 0) {
          item.chkState = '待审核'
        }
        item.pad = false
      })

      this.tableData = res.items
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      const obj = {
        pagesize: this.pagesize,
        page: this.page
      }
      this.listApi(obj)
      this.activeName = 'first'
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      const obj = {
        pagesize: this.pagesize,
        page: this.page
      }
      this.listApi(obj)
      this.activeName = 'first'
    },
    // 封装列表api
    async listApi(obj) {
      const { data: res } = await getQuestionsChoiceApi(obj)
      this.allPageData = res.counts
      this.tableData = res.items
    },
    successEle() {
      this.listApi()
    }
  }
}
</script>

<style lang="scss" scoped>
.tabsEle {
  margin-top: 100px;
}
.block {
  float: right;
  margin: 10px;
}
.icTitle {
  line-height: 20px;
  margin-bottom: 15px;
}
</style>
>
